<template>
  <div class="layout">
    <div class="top">
      <el-form :inline="true" :model="formInline" style="min-width: 900px">
        <el-form-item label="用户名:">
          <el-input v-model="formInline.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="产品线:">
          <el-input v-model="formInline.product" placeholder="请输入产品线" />
        </el-form-item>
        <el-form-item label="行业:">
          <el-input v-model="formInline.bussiness" placeholder="请输入行业" />
        </el-form-item>
        <el-form-item label="任务创建时间:">
          <el-date-picker
            v-model="formInline.startTimes"
            type="datetime"
            placeholder="开始时间"
          />
          ~
          <el-date-picker
            v-model="formInline.endTimes"
            type="datetime"
            placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="calc(100vh - 180px)"
      >
        <el-table-column prop="username" label="用户名" sortable />
        <el-table-column prop="productLine" label="产品线" sortable />
        <el-table-column prop="bussines" label="行业" sortable />
        <el-table-column prop="creatTimes" label="创建时间" sortable />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="handleClick(scope.row)"
              >审核</el-button
            >
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="paging">
        <div class="total">共 {{ pager.total }} 项数据</div>
        <div class="pagination">
          <el-pagination
            layout="prev, pager, next"
            :current-page="pager.currentPage"
            :total="pager.total"
            background
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import "../mock/index";
import axios from "axios";
const params = reactive({
  currentPage: 1,
  username: "",
  product: "",
  bussiness: "",
  startTimes: "",
  endTimes: "",
});
const tableData = ref([]);
const router = useRouter();
function getlist() {
  axios
    .get("/api/getDate", {
      data: {
        ...params,
      },
    })
    .then((res) => {
      tableData.value = res.data.list;
      pager.total = res.data.total;
    });
}
onMounted(async () => {
  getlist();
});
const pager = reactive({
  total: 100,
  currentPage: 1,
});
const formInline = reactive({
  username: "",
  product: "",
  bussiness: "",
  startTimes: "",
  endTimes: "",
});
const formatDate = (date) => {
  let moment = require("moment");
  let time = date.getTime();
  return moment(time).format("YYYY-MM-DD hh:mm:ss");
};

const handleClick = (item) => {
  router.push({ path: "/audit", query: { id: item.id } });
};

const handleCurrentChange = (e) => {
  params.currentPage = e;
  pager.currentPage = e;
  getlist()
};

const onSearch = () => {
  if (formInline.startTimes)
    formInline.startTimes = formatDate(formInline.startTimes);
  if (formInline.endTimes)
    formInline.endTimes = formatDate(formInline.endTimes);
  Object.keys(params).forEach((item) => {
    params[item] = formInline[item];
  });
  params.currentPage = pager.currentPage;
  getlist();
};
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  position: relative;
  .top {
    margin-top: 10px;
  }
  .footer {
    width: 100%;
    height: 32px;
    line-height: 32px;
    padding: 10px 0px;
    position: absolute;
    left: 0;
    border: 1px solid #ebeef5;
    border-top: none;
    .paging {
      .total {
        display: inline-block;
        margin-left: 10px;
        color: #606266;
        font-size: 14px;
      }
      .pagination {
        float: right;
      }
    }
  }
}
</style>
